<template>
	<view>
		<view class="viewTab">
			<view
				class="tabBar top"
				:style="{
					'--color': color,
					backgroundColor: tabBar.bgColor,
					'--inactive-color': tabBar.inactiveColor || '#666',
				}">
				<view
					class="list flex-1"
					v-for="(item, index) in tabBar.list"
					:key="index"
					:class="!item.isNav && tab == item.id ? 'color_d85' : 'inactive'"
					@click="swichTab(item)">
					<template v-if="!item.img">
						<view
							class="bulge flexac zIndex m-bot4"
							:style="{ background: tabBar.iconBg || '#fff' }"
							v-if="item.mode">
							<view
								class="iconfont size50"
								:class="item.icon"
								:style="{ color: tabBar.iconColor || '#666' }"></view>
						</view>
						<view class="iconfont size40 m-bot4" :class="item.icon" v-else></view>
					</template>
					<template v-else>
						<view
							class="bulge flexac zIndex m-bot4"
							:style="{ background: tabBar.iconBg || '#fff' }"
							v-if="item.mode">
							<image
								:src="$imgUrls(item.img)"
								mode="aspectFill"
								class="tabImg"></image>
							<view
								class="iconfont size50"
								:class="item.icon"
								:style="{ color: tabBar.iconColor || '#666' }"></view>
						</view>
						<image
							:src="$imgUrls(item.img)"
							mode="aspectFill"
							class="tabImg"
							v-else></image>
						<!-- 	<view class="iconfont size40 m-bot4" :class="item.icon" v-else></view> -->
					</template>
					<text class="h6">{{ item.title }}</text>
				</view>
			</view>
		</view>

		<showModel @cancelFunc="setHome({ showMode: false })" v-if="showMode" type="2"></showModel>
		<!-- 打开客服 -->
		<KeFu
			v-if="showKefu"
			@cancelFunc="setHomeKefu({ showKefu: false })"
			@openModal="setHome({ showMode: true })"></KeFu>
		<!-- 分享海报 -->
		<SharePoster
			v-if="showShareQr"
			myid=" "
			type="1"
			pageType="0"
			@closePoster="setHomeShare({ showShareQr: false })"></SharePoster>
		<!-- 口令弹框 -->
		<!-- <prompt v-if="showPrompt" @cancelFunc="setPrompt(false)"></prompt> -->
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import KeFu from '@/components/showKefu.vue';
	import SharePoster from '@/components/sharePoster.vue';
	export default {
		name: 'tabBar',
		props: ['tab'],
		data() {
			return {
				defaultTit: {
					// tabBar页面的默认标题
					3: '分类',
					4: '点餐',
					5: '门店',
					6: '预约活动',
					7: '购物车',
					9: '资讯',
					11: '游戏',
					14: '学习',
					15: '答题',
					16: '会员中心',
				},
			};
		},
		components: {
			KeFu,
			SharePoster,
		},
		created() {
			uni.hideTabBar();
			if (!this.tab || !this.tabBar) return;
			const item = this.tabBar.list.find((n) => !n.isNav && n.id == this.tab);
			const tabTitle = this.defaultTit[this.tab] || '';
			if (!item) return this.changeTab({ tabTitle, tabId: this.tab });
			this.changeTab({ tabTitle: item.title || tabTitle, tabId: item.id });
		},

		methods: {
			...mapMutations(['changeTab', 'setPrompt', 'setHome', 'setHomeKefu', 'setHomeShare']),
			swichTab(item) {
				// 功能
				if (item.isNav == 2) return this.$pop.funcBtnClick(item);

				// 跳转普通页面
				// if (item.isNav == 1) return this.$banerGo(item);
				if (item.isNav == 1) return this.$rectTo(item.website_list_url);

				// 跳tabBar页面
				let pages = getCurrentPages();
				let page = pages[pages.length - 1];
				console.log('当前tab', item, page);
				if (page.$page.fullPath == item.path) return;
				// 所有分类(电商)
				if (item.id == 3 && item.cateType) {
					const path = `${item.path}?cateType=${item.cateType}`;
					this.$rectTo(path);
					return;
				}
				// 某个分类
				if (item.id == 12) {
					const path = `${item.path}?back=0&classId=${item.classId}`;
					this.$rectTo(path);
					return;
				}
				// 订单
				if (item.id == 13) {
					const path = `${item.path}?back=0`;
					this.$rectTo(path);
					return;
				}
				if (item.path == '/pages/index/index') {
					this.$rectTo('/Reserve/Matches');
					return;
				}

				this.$rectTo(item.path);
			},
		},

		computed: {
			...mapState([
				'tabBar',
				'color',
				'tabId',
				'vid',
				'showPrompt',
				'showMode',
				'showKefu',
				'showShareQr',
			]),
		},
	};
</script>

<style lang="scss" scoped>
	.viewTab {
		width: 100%;
		height: 100rpx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tabBar {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10060;
		box-sizing: content-box;
		display: flex;
		align-items: center;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.list {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		.bulge {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-top: -60rpx;
			box-shadow: 0 0 20rpx 0 rgba(214, 214, 214, 0.5);
		}
		.tabImg {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.Cutoff {
		width: 100%;
		height: 360rpx;
		box-sizing: border-box;

		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}

	.theme {
		color: var(--color);
	}
	.inactive {
		color: var(--inactive-color);
	}
</style>